<template>
  <view>
    <view class="gg-ls-tabbox-wrap">
      <view class="gg-ls-tabbox-tabs">
        <view class="gg-ls-tabbox-item" v-for="(item, i) in localTabs" :key="i" :class="{ 'gg-ls-tabbox-item-active': swiperCurrent == i }"
          @click="swiperChange(i)" :style="{ transition: transtionTime + 'ms' }">
          <text>{{ item.name }}</text>
        </view>
        <view class="gg-ls-tabbox-slider-box"
          :style="{ width: 100 / localTabs.length + '%', transition: transtionTime + 'ms', left: swiperCurrentSliderLeft + '%' }">
          <view class="gg-ls-tabbox-slider"></view>
        </view>
      </view>
    </view>
    <view class="gg-ls-main-wrap" :style="{ height: mainHeight }">
      <swiper class="gg-ls-main__swiper" style="height: 100%;" :current="swiperCurrent" :duration="transtionTime" @animationfinish="animationfinish">
        <swiper-item class="swiper-item" v-for="(tabsItem, tabsIndex) in localTabs" :key="tabsIndex">
          <view class="gg-ls-main__scroll-items">
            <scroll-view :refresher-enabled="reloadDown">

            </scroll-view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>

// <!-- #ifdef H5 || APP-PLUS -->
//               <slot :name="item.id"></slot>
//               <!-- #endif -->
//               <!-- #ifdef MP -->
//               <slot name="{{item.id}}"></slot>
//               <!-- #endif -->

export default {
  name: "gg-lists-swiper",
  props: {
    tabsArr: {
      type: [Array, Object],
      default: []
    }
  },
  data() {
    return {
      localTabs: [],
      mainHeight: 0,
      statusBarHeight: 0,
      swiperCurrent: 0,
      swiperCurrentSliderLeft: 0,
      transtionTime: 100,
      triggered: true,
      //下拉刷新
      reloadDown: false
    };
  },
  created(option) {
    // 配置高度
    let sysInfo = uni.getSystemInfoSync();
    let statusBarHeight = sysInfo.statusBarHeight;
    this.mainHeight = sysInfo.screenHeight - statusBarHeight - 50 - 60 - 50 + 'px';
    //
    this.localTabs = this.tabsArr;
    for (let i in this.tabsArr) {
      let itemTabs = this.tabsArr[i];
      if (itemTabs.lists) {

      }
    }

    // this.swiperChange(option.order_state);

  },
  methods: {
    animationfinish({ detail: { current } }) {
      /* this.$refs.tabs.setFinishCurrent(current); */
      this.swiperCurrent = current;
      this.current = current;
      this.swiperChange(current);
    },
    swiperChange(index) {
      this.swiperCurrent = index;
      this.swiperCurrentSliderLeft = (100 / this.localTabs.length) * index;
      let url = this.localTabs[index].api;
      //--------------------------------------------
      //--------------------------------------------
      uni.showLoading();
      // console.log(index);
      // index 0全部
      //swiperChange 的 index 对呀 status状态

      // 假如滑动了tab则 去获取对应的数据
      if (this.localTabs[index].data.length == 0) {
        // console.log(this.localTabs);
        // 只获取一次数据
        // this.getOrderData(index)
        let apiParam = this.localTabs[index].apiParam || {};
        this.$AllApi.getWmOrder(apiParam).then(res => {
          setTimeout(() => {
            this.localTabs[index].data = res.data;
            this.localTabs[index].hide_load = true;
            uni.hideLoading();
          }, 1000);
        });
      }
      uni.hideLoading();
    },
    click() {
      this.$emit('click');
    },
    close(e) {
      this.$emit('close');
    }
  }
}
</script>

<style>
/** tabs */

.gg-ls-tabbox-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: sticky;
  top: calc(44px + var(--status-bar-height));
  z-index: 10;
  background-color: white;
  height: 50px;
  padding-bottom: 10px;
}
.gg-ls-tabbox-tabs {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: space-evenly;
}
.gg-ls-tabbox-item {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 70px;
  color: #666666;
}
.gg-ls-tabbox-item text {
  font-size: 16px;
}
.gg-ls-tabbox-active {
  color: #333333;
  font-weight: bold;
}
.gg-ls-tabbox-slider-box {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 0;
  width: 20%;
}
.gg-ls-tabbox-slider {
  display: flex;
  background: #f6d200;
  width: 30px;
  height: 3px;
}

/** swiper */
.gg-ls-main-wrap {
  position: relative;
  background-color: #ffffff;
}
.gg-ls-main__swiper {
  background-color: #eeeeee;
  height: 100%;
  width: 100%;
}

.gg-ls-main__scroll-items {
  width: 100%;
  height: 100%;
}
</style>